@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>供应商选择</title>
    <link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <script src="~/scripts/jquery-3.4.1.min.js"></script>
    <script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #f8f9fa;
            font-family: 'Microsoft YaHei', sans-serif;
            font-size: 14px;
        }
        .dialog-container {
            padding: 20px;
            background: #fff;
            height: calc(100vh - 40px);
            display: flex;
            flex-direction: column;
        }
        .dialog-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 16px;
            border-bottom: 1px solid #e8e8e8;
        }
        .dialog-title {
            font-size: 18px;
            font-weight: 500;
            color: #262626;
        }
        .close-btn {
            width: 28px;
            height: 28px;
            line-height: 26px;
            text-align: center;
            background: #f5f5f5;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            cursor: pointer;
            color: #666;
            font-size: 16px;
        }
        .close-btn:hover {
            background: #e6f7ff;
            border-color: #40a9ff;
        }
        .search-container {
            background: #fff;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 8px;
            border: 1px solid #e8e8e8;
        }
        .table-container {
            flex: 1;
            background: #fff;
            border-radius: 8px;
            border: 1px solid #e8e8e8;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .search-form .layui-form-item {
            margin-bottom: 15px;
        }
        .dialog-footer {
            text-align: center;
            padding: 16px 0 0 0;
            border-top: 1px solid #e8e8e8;
            margin-top: 16px;
        }
        .layui-btn {
            padding: 0 24px;
            height: 36px;
            line-height: 36px;
            border-radius: 6px;
            font-size: 14px;
        }
        .enabled-tag {
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            color: white;
            display: inline-block;
        }
        .enabled-1 { background: #52c41a; }  /* 正常 */
        .enabled-0 { background: #ccc; }      /* 禁用 */
        .selected-row {
            background-color: #e6f7ff !important;
        }
        .layui-form-label {
            width: 100px;
            padding: 9px 10px 9px 0;
        }
        .layui-input-block {
            margin-left: 110px;
        }
    </style>
</head>
<body>
    <div class="dialog-container">
        <div class="dialog-header">
            <div class="dialog-title">供应商选择</div>
            <div class="close-btn" id="closeBtn">×</div>
        </div>
        
        <!-- 搜索条件区域 -->
        <div class="search-container">
            <form class="layui-form search-form" lay-filter="searchForm">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">供应商编码</label>
                            <div class="layui-input-block">
                                <input type="text" name="supplierCode" placeholder="请输入供应商编码" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">供应商名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="supplierName" placeholder="请输入供应商名称" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">供应商简称</label>
                            <div class="layui-input-block">
                                <input type="text" name="supplierNickname" placeholder="请输入供应商简称" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <div class="layui-input-block" style="text-align: right; margin-left: 0;">
                                <button type="button" class="layui-btn" lay-submit lay-filter="searchBtn">
                                    <i class="layui-icon layui-icon-search"></i> 搜索
                                </button>
                                <button type="reset" class="layui-btn layui-btn-primary">
                                    <i class="layui-icon layui-icon-refresh"></i> 重置
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">英文名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="englishName" placeholder="请输入供应商英文名称" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">是否启用</label>
                            <div class="layui-input-block">
                                <select name="isEnabled">
                                    <option value="">是否启用</option>
                                    <option value="1">是</option>
                                    <option value="0">否</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <!-- 预留空间 -->
                    </div>
                </div>
            </form>
        </div>

        <!-- 数据表格区域 -->
        <div class="table-container">
            <!-- 数据表格 -->
            <table class="layui-hide" id="supplierTable" lay-filter="supplierTable"></table>
        </div>
        
        <div class="dialog-footer">
            <button class="layui-btn" id="confirmBtn">确定</button>
            <button class="layui-btn layui-btn-primary" id="cancelBtn">取消</button>
        </div>
    </div>

    <!-- 状态列模板 -->
    <script type="text/html" id="enabledTpl">
        {{# if (d.isNo === 1) { }}
            <span class="enabled-tag enabled-1">正常</span>
        {{# } else { }}
            <span class="enabled-tag enabled-0">禁用</span>
        {{# } }}
    </script>

    <!-- 备注列模板 -->
    <script type="text/html" id="contextTpl">
        {{# if (d.context && d.context.length > 10) { }}
            <span title="{{d.context}}">{{d.context.substring(0, 10)}}...</span>
        {{# } else { }}
            {{d.context || ''}}
        {{# } }}
    </script>

    <script>
        layui.use(['table', 'form', 'layer'], function() {
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            
            var selectedRow = null; // 选中的行数据

            // 初始化表格
            var tableIns = table.render({
                elem: '#supplierTable',
                url: '/SupplierReturns/GetSuppliers',
                method: 'POST',
                page: true,
                limit: 10,
                limits: [10, 20, 50, 100],
                height: 'full-200', // 自适应高度
                cols: [[
                    { type: 'radio', fixed: 'left' },
                    { field: 'supplierCode', title: '供应商编码', width: 150 },
                    { field: 'supplierName', title: '供应商名称', width: 200 },
                    { field: 'supplierNickname', title: '供应商简称', width: 150 },
                    { field: 'supplierGrade', title: '供应商等级', width: 120 },
                    { field: 'supplierScore', title: '供应商评分', width: 120 },
                    { field: 'supplierPhone', title: '供应商电话', width: 150 },
                    { field: 'isNo', title: '是否启用', width: 100, templet: '#enabledTpl' },
                    { field: 'context', title: '备注', templet: '#contextTpl' }
                ]],
                request: {
                    pageName: 'pageNumber',
                    limitName: 'pageSize'
                },
                response: {
                    statusName: 'success',
                    statusCode: true,
                    msgName: 'message',
                    countName: 'totalCount',
                    dataName: 'items'
                },
                parseData: function(res) {
                    return {
                        success: res.success,
                        message: res.message,
                        totalCount: res.data ? res.data.totalCount : 0,
                        items: res.data ? res.data.items : []
                    };
                }
            });

            // 监听单选框事件
            table.on('radio(supplierTable)', function(obj) {
                selectedRow = obj.data;
                console.log('选中供应商:', selectedRow);
            });

            // 监听行双击事件（双击直接选择）
            table.on('rowDouble(supplierTable)', function(obj) {
                selectedRow = obj.data;
                confirmSelection();
            });

            // 搜索
            form.on('submit(searchBtn)', function(data) {
                var searchData = data.field;
                
                // 组合搜索关键词
                var keyword = '';
                if (searchData.supplierCode) keyword += searchData.supplierCode + ' ';
                if (searchData.supplierName) keyword += searchData.supplierName + ' ';
                if (searchData.supplierNickname) keyword += searchData.supplierNickname + ' ';
                if (searchData.englishName) keyword += searchData.englishName + ' ';
                
                keyword = keyword.trim();
                
                var whereData = {
                    keyword: keyword
                };
                
                // 添加启用状态筛选
                if (searchData.isEnabled) {
                    whereData.isEnabled = searchData.isEnabled;
                }

                tableIns.reload({
                    where: whereData,
                    page: { curr: 1 }
                });
                return false;
            });

            // 重置搜索
            $('.layui-btn-primary').click(function() {
                $('.search-form')[0].reset();
                form.render();
                tableIns.reload({
                    where: {},
                    page: { curr: 1 }
                });
            });

            // 确定选择
            function confirmSelection() {
                if (!selectedRow) {
                    layer.msg('请选择一个供应商', {icon: 2});
                    return;
                }
                
                // 调用父窗口的回调函数
                if (parent && parent.onSupplierSelected) {
                    parent.onSupplierSelected(selectedRow);
                }
                
                // 关闭弹窗
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            }

            // 确定按钮
            $('#confirmBtn').click(function() {
                confirmSelection();
            });

            // 取消按钮和关闭按钮
            $('#cancelBtn, #closeBtn').click(function() {
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            });
        });
    </script>
</body>
</html> 